<template>
  <div class="circle-tabs">
    <div class="circle-tabs-nav" ref="container">
      <div
        class="circle-tabs-nav-item"
        v-for="(t, index) in titles"
        :ref="(el: HTMLDivElement) => { if (t === selected) selectedItem = el }"
        @click="select(t)"
        :class="{ selected: t === selected }"
        :key="index"
      >
        {{ t }}
      </div>
      <div class="circle-tabs-nav-indicator" ref="indicator"></div>
    </div>
    <div class="circle-tabs-content">
      <component :is="current" :key="current.props.title" />
    </div>
  </div>
</template>

<script lang="ts" setup="props, context">
import Tab from "./Tab.vue";
import { computed, ref, watchEffect, onMounted, useSlots } from "vue";
/** References: https://vitejs.dev/guide/features.html#typescript */
import type { Component } from "vue";
const props = defineProps<{ selected: string }>();
const emit = defineEmits<{
  (e: "update:selected", title: string): void;
}>();
const selectedItem = ref<HTMLDivElement>(null);
const indicator = ref<HTMLDivElement>(null);
const container = ref<HTMLDivElement>(null);
onMounted(() => {
  watchEffect(
    () => {
      const { width } = selectedItem.value.getBoundingClientRect();
      indicator.value.style.width = width + "px";
      const { left: left1 } = container.value.getBoundingClientRect();
      const { left: left2 } = selectedItem.value.getBoundingClientRect();
      const left = left2 - left1;
      indicator.value.style.left = left + "px";
    },
    {
      flush: "post",
    }
  );
});
const slots = useSlots();
const defaults = slots.default();
defaults.forEach((tag) => {
  if ((tag.type as Component).name !== Tab.name) {
    throw new Error("Tabs 子标签必须是 Tab");
  }
});
const current = computed(() => {
  return defaults.find((tag) => tag.props.title === props.selected);
});
const titles = defaults.map((tag) => {
  return tag.props.title;
});
const select = (title: string) => {
  emit("update:selected", title);
};
</script>

<style lang="scss">
$blue: #40a9ff;
$color: #333;
$border-color: #d9d9d9;
div.circle-tabs {
  &-nav {
    display: flex;
    color: $color;
    border-bottom: 1px solid $border-color;
    position: relative;
    &-item {
      padding: 8px 0;
      margin: 0 16px;
      cursor: pointer;
      &:first-child {
        margin-left: 0;
      }
      &.selected {
        color: $blue;
      }
    }
    &-indicator {
      position: absolute;
      height: 3px;
      background: $blue;
      left: 0;
      bottom: -1px;
      width: 100px;
      transition: all 250ms;
    }
  }
  &-content {
    padding: 8px 0;
  }
}
</style>
